<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/* 画圆 */
			#d1{
				width:500px;
				height:500px;
				/* 画圆：边框、背景色 */
				background-color: #f00;
				/* 边框倒角条件：边框或背景色 */
				border-radius: 50%;
				/* 微调定位 */
				position: relative;
				left:238px;
				top:10px;
			}
			#d2{
				width:400px;
				height:400px;
				/* 画圆：边框、背景色 */
				background-color: #ffaa00;
				/* 边框倒角条件：边框或背景色 */
				border-radius: 50%;
				/* 定位属性：元素直接定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页X Y轴*/
				position: relative;
				left:50px;/* X轴 横向 */
				top:50px;/* Y轴 纵轴 */
			}
			#d3{
				width:300px;
				height:300px;
				/* 画圆：边框、背景色 */
				background-color: #ff0;
				/* 边框倒角条件：边框或背景色 */
				border-radius: 50%;
				/* 定位属性：元素直接定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页X Y轴*/
				position: relative;
				left:50px;/* X轴 横向 */
				top:50px;/* Y轴 纵轴 */
			}
			/* 棍子 */
			p{
				width:40px;
				height:500px;
				background-color: #f00;
				/* 倾斜 转换属性：旋转值 */
				transform:rotate(-30deg);
				/* 微调定位 */
				position:relative;
				left:710px;
				top:-92px;
			}
			/* 没有定位：加层级 数值越高，显示级别越高   z-index: */
		</style>
	</head>
	<body>
		<!-- 画三个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p></p>
		
		
		
		
	</body>
</html>